<template>
	<NavBarVue :title="source == 1 ? adminsInfo?.introduction : businessInfo?.businessHeadName + '主页'" />
	<view class="myBox">
		<!-- 头部 -->
		<view class="myLog">
			<div class="head">
				<div class="head_left">
					<view style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;">
						<BaseCoverImage :src="source == 1 ? adminsInfo?.userNickPicture : businessInfo?.businessLicense"/>
					</view>
					<p style="color: #eee;margin-top: 10px;">{{source == 1 ? adminsInfo?.ipAddress : businessInfo?.companyAddress}}</p>
				</div>
				<div class="head_right">
					<p>
						{{source == 1 ? adminsInfo?.nickName : businessInfo?.businessName}}
						<span>{{source == 1 ? adminsInfo?.phone : businessInfo?.businessHeadPhone}}</span>
					</p>
					<p style="color: #eee;margin-top: 15px;">
						笔记ID：
						<span>{{source == 1 ? adminsInfo?.ipAddress : businessInfo?.businessIntroduction}}</span>
					</p>
				</div>
			</div>
			<div class="head_bot">
				<view class="bot_left">
					<view 
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;" 
						v-for="(item) in atten_list"
						:key="item.type"
						@click="toTabOther(item.type)"
					>
						<view style="color: #fff;">{{item.num}}</view>
						<text style="color: #bbb;font-size: 12px;margin-top: 5px;">{{item.text}}</text>
					</view>
				</view>
				<div class="bot_right">
					<button class="btn btn-attention" @click="attention">关注</button>
					<button class="btn btn-content" @click="priviteContent">私信</button>
				</div>
			</div>
			<view class="shop_list" v-if="source == 2">
				<view 
					v-for="(item) in businessInfo?.storeVOList" 
					:key="item.id"
					style="margin-left: 20rpx;"
					@click="toShopDetail(item)"
				>
					<view style="width: 92rpx;height: 92rpx;overflow: hidden;border-radius: 50%;">
						<BaseCoverImage :src="item?.storeLogoPic" mode="aspectFill" />
					</view>
					<view class="shop_list_name">{{item?.storeName}}</view>
				</view>
			</view>
		</view>
		<!-- 主体部门 -->
		<view class="main">
			<view class="main_tab">
				<u-tabs :list="tab_list" @click="tabList"></u-tabs>
			</view>
			<view class="pubu">
				<ShowIndex v-if="articleStore.articleListData.objects.length" :dataList="pageResults"/>
				<WaterfallLikeVue v-else :dataList="pageResults"/>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onMounted,
	reactive,
	ref,
	computed
} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {
	useBusinessStore,
	useUserStore,
	useArticleStore
} from '@/store'
import ShowIndex from '@/components/ShowIndex.vue';
import WaterfallLikeVue from '@/components/Waterfall_like.vue';

const tabTag = reactive([
	{
		tagNum: 3,
		tagType: '关注'
	}
])
// 渲染关注，粉丝，获赞量
const atten_list = reactive([
	{
		num: 25,
		text: '关注',
		type: 'attention',
		url: '/pages/tab-mine/attention-fan/index'
	},
	{
		num: 25,
		text: '粉丝',
		type: 'fans',
		url: '/pages/tab-mine/attention-fan/index'
	},
	{
		num: 25,
		text: '获赞和评论',
		type: 'comment',
		url: '/pages/tab-mine/comment/index'
	}
])

const tab_list = computed(() => {
	if(source.value == 1) {
		return [{
			name: '笔记',
		}, {
			name: '收藏',
		}, {
			name: '点赞'
		}]
	} else {
		return [{
			name: '笔记',
		}]
	}
})
const id = ref(null)
const source = ref(null)
onLoad((e) => {
	console.log(e, "| e");
	id.value = e.id
	source.value = e.source
})
const userStore = useUserStore()
const articleStore = useArticleStore()
const itemIndex = ref(0)
const pageResults = computed(() => {
	switch(itemIndex.value) {
		case 0:
			return articleStore.articleListData.objects
		case 1:
			return articleStore.pageResults.data?.collectFutureOPageResult?.objects
		case 2:
			return articleStore.pageResults.data?.likeFuturePageResult?.objects
		default:
			return []
	}
})
const businessStore = useBusinessStore()
const businessInfo = ref({})
const adminsInfo = ref({})
onMounted(async () => {
	if(source.value == 1) {
		// 访问用户的详情接口
		await userStore.adminBasicUserDetail(id.value)
		console.log(userStore.userInfo.adminUserInfos, "| userStore.userInfo.adminUserInfos");
		adminsInfo.value = userStore.userInfo.adminUserInfos
	}
	if(source.value == 2) {
		// 访问商家接口
		await businessStore.findBusinessId(id.value)
		businessInfo.value = businessStore.businessDetail?.business
	}
	const res = await articleStore.articleGetBehaviorList({
		page: 1,
		pageSize: 10
	})
	const resLoacation = await uni.getLocation({
		type: 'wgs84',
	});
	await articleStore.articleList({
		latitude: resLoacation.latitude,
		longitude: resLoacation.longitude,
		page: 1,
		pageSize: 10,
		source: 1,
		userId: id.value
	}, 'init')
	atten_list[2].num = articleStore.articleListData.objects.reduce((prev, next) => {
		return prev += next.likeCount
	}, 0)
	atten_list[0].num = articleStore.articleListData.objects.reduce((prev, next) => {
		return prev += next.favoriteCount
	}, 0)
})
const tabList = (item) => {
	console.log(item, "| item");
	itemIndex.value = item.index
}
const attention = () => {
	uni.showToast({
		title: "关注"
	})
}
const priviteContent = () => {
	uni.showToast({
		title: "私信"
	})
}

// 店铺详情
const toShopDetail = (item) => {
	console.log(item, "| itme");
	uni.navigateTo({
		url: `/pages/tab-index/shop/visit-shop/index?id=${item.id}`
	})
}
</script>

<style scoped>
.myBox {
	width: 100vw;
	height: 100vh;
}

.myLog {
	width: 100%;
	/* height: 240px; */
	/* margin-top: 20px; */
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	background: rgb(99, 139, 160);
}

.head {
	width: 100%;
	height: 130px;
	/* background: salmon; */
	display: flex;
	/* margin-top: 20px; */
}

.head_left {
	width: 100px;
	height: 100%;
	/* background: salmon; */
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.head_right {
	flex: 1;
	margin-top: 30px;
	margin-left: 15px;
	color: #fff;
}

.head_bot {
	width: 100%;
	height: 80px;
	/* background: salmon; */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bot_left {
	width: 200px;
	height: 100%;
	display: flex;
	/* background: salmon; */
	justify-content: space-evenly;
}

.bot_right {
	display: flex;
	justify-content: center;
	align-items: center;
}
.shop_list {
	display: flex;
	align-items: center;
	margin-bottom: 60rpx;
}
.shop_list_name {
	text-align: center;
	margin-top: 10rpx;
	color: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
}
.shop_list > view {
	width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.main {
	width: 100%;
	/* height: 500px; */
	/* background: sandybrown; */
	margin-top: -30px;
}

.main_tab {
	width: 100%;
	height: 50px;
	background: #fff;
	border-radius: 12px 12px 0px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main_li {
	width: 100%;
	/* height: 200px; */
	/* background: seashell; */
	text-align: center;
}

.pubu {
	width: 100%;
	/* height: 300px; */
	height: auto;
	display: flex;
	justify-content: space-evenly;
}

.left {
	width: 46vw;
	height: auto;
	margin-right: 2vw;
}

.left .ul {
	width: 100%;
	height: auto;
}

.left .ul .li {
	font-size: 14px;
	width: 100%;
	height: auto;
	overflow: hidden;

}

.right {
	width: 46vw;
	height: auto;
}

.right.ul {
	width: 100%;
	height: auto;
}

.right .ul .li {
	font-size: 14px;
	width: 100%;
	height: auto;
}

.tx {
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	padding: 0px 10px;
	margin-top: 10px;
}

.nr {
	box-sizing: border-box;
	padding: 0px 10px;
}

.ttt {
	width: 100%;
	height: 220px;
}

.tt {
	width: 100%;
	height: 200px;
}
.btn {
	width: 110rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 56rpx;
	margin-right: 20rpx;
	font-size: 24rpx;
}
.btn-attention {
	background: #FB7685;
	color: #FFFFFF;
}
.btn-content {
	background:rgb(99, 139, 160);
	color: #fff;
	border: 1px solid #fff;
}
</style>